<template>
    <el-dialog
        :visible.sync="dialogVisible"
        size="40%"
        width="400px"
        append-to-body
        custom-class="grade-pop-content"
        :before-close="handleClose">
        <div style="display: flex;align-items: center;">
            <span style="width: 80px;flex-shrink: 0;text-align: right;margin-right: 20px;">评分</span>
            <el-input style="width: 60%;" v-model="rateScore"></el-input>
        </div>
        <div class="btns">
            <el-button @click.native="cancel">取消</el-button>
            <el-button type="primary" @click="confirm">确认</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { updateRateScore } from './../../api';
export default {
    data() {
        return {
            dialogVisible: false,
            rateScore: '',
            entryId: ''
        }
    },
    methods: {
        open({ entryId }) {
            this.dialogVisible = true;
            this.entryId = entryId;
        },
        handleClose() {
            this.dialogVisible = false;
            this.rateScore = '';
        },
        handleCalcel() {
            this.$emit('cancel');
        },
        handleClickGrade() {
            this.dialogVisible = true;
        },
        async confirm() {
            const { code, msg, data } = await updateRateScore({
                entryId: this.entryId,
                rateScore: Number(Number(this.rateScore).toFixed(1))
            });
            if (code !== 0) {
                this.$message.error(msg);
                return;
            }
            this.$message.success('评分成功')
            this.$emit('success');
            this.cancel();
        },
        cancel() {
            this.dialogVisible = false;
            this.rateScore = '';
        }
    }
}
</script>
<style lang="scss" scoped>
    .grade-pop-content {

        .btns {
            display: flex;
            justify-content: space-around;
            width: 80%;
            margin: 50px auto 0 auto;
        }
    }
</style>